<!-- 圆角轮播图 -->
<template>
    <div class="lbtRoundBox">
        <el-carousel :height="height" :interval="5000" arrow="always">
            <el-carousel-item v-for="(item,index) in lbtImg" :key="index">
                <img style="width: 100%;height: 100%;" :src="item.url" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
defineProps({
    height: {
        type: String,
        default: '400px'
    },
    lbtImg: {
        type: Array,
        default: []
    }
})
</script>

<style scoped lang="scss">
.lbtRoundBox {
    width: 100%;
    // height: 100%;
    min-height: 100px;
    border-radius: 8px;
    overflow: hidden;
    /* 修改箭头样式 */
    :deep(.el-carousel__arrow) {
        background-color: rgba(0, 0, 0, 0.4) !important;  // 使用项目绿色并提高不透明度
        color: white !important;
        width: 34px;
        height: 34px;
        font-size: 16px;
        &:hover {
            background-color: rgba(0, 0, 0, 0.8) !important;  // 悬停时完全不透明
        }
    }
}
</style>